<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>积分记录管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* Add any specific styles for this page if needed */
    </style>
</head>

<body>
    <div class="container py-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">积分记录管理</h2>
            <!-- No add button for records -->
        </div>

        <!-- 积分记录表格 -->
        <div class="card">
            <div class="card-body">
                <table class="table table-bordered align-middle mb-0" id="recordsTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width:80px;">ID</th>
                            <th>用户ID</th>
                            <th>规则ID</th>
                            <th>积分变动</th>
                            <th>操作时间</th>
                            <th>描述</th>
                            <!-- No action column for records -->
                        </tr>
                    </thead>
                    <tbody>
                        <!-- JS填充 -->
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    
    <script src="/jquery-3.7.1.min.js"></script>
    <script>
        // 积分记录数据
        let pointRecords = [];

        // 渲染表格
        function renderTable() {
            const tbody = document.querySelector('#recordsTable tbody');
            
            tbody.innerHTML = '';
            pointRecords.forEach((record) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                <td>${record.id || ''}</td>
                <td>${record.userId || ''}</td>
                <td>${record.ruleId || ''}</td>
                <td>${record.points > 0 ? '+' : ''}${record.points || 0}</td> <!-- 显示积分变动，正数加+ -->
                <td>${record.actionTime || ''}</td>
                <td>${record.description || ''}</td>
                `;
                tbody.appendChild(tr);
            });
        }

        // 获取积分记录数据
        function fetchRecords() {
            $.ajax({
                url: 'http://localhost:8082/api/point-records', // 你的后端获取记录接口
                method: 'GET',
                dataType: 'json',
                success: function (data) {
                    // 根据提供的数据格式，后端直接返回记录数组
                    if (data && data.data && Array.isArray(data.data)) {
                        pointRecords = data.data;
                        renderTable();
                    } else {
                        console.error('获取积分记录数据失败: 后端返回数据格式不正确', data);
                        alert('获取积分记录数据失败: 后端返回数据格式不正确');
                    }
                },
                error: function (xhr, status, error) {
                    console.error('获取积分记录数据失败:', status, error, xhr.responseText);
                    alert('无法连接到积分记录接口');
                }
            });
        }

        // 初始化表格（页面加载时拉取数据）
        $(function () {
            fetchRecords();
        });
    </script>
</body>

</html>